<template>
  <div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      active-text-color="#409eff"
      router
    >
      <div class="logo">
        <router-link to="/">
          <img src="~assets/imgs/logo.png" alt />
        </router-link>
      </div>
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/goods">全部商品</el-menu-item>
      <el-menu-item index="/about">关于我们</el-menu-item>

      <div class="so">
        <el-input placeholder="请输入搜索内容" v-model="search">
          <el-button slot="append" icon="el-icon-search" @click="searchClick"></el-button>
        </el-input>
      </div>
    </el-menu>
  </div>
</template>
<script>
export default {
  props:["HeadActive"],//头部导航栏选中的标签
  data() {
    return {
      search: "",
    };
  },
  computed:{
    activeIndex() {
      return this.HeadActive
    }
  },
  methods: {
    searchClick() {
      if(this.search  != "") {
        // 跳转到全部商品页面，并传递搜索条件
        this.$router.push({path:"goods", query: {search:this.search}})
        this.search = ""
      }
    }
  }
};
</script>
<style>
/* 顶栏容器CSS */
.el-header .el-menu {
  max-width: 1225px;
  margin: 0 auto;
}
.el-header .logo {
  height: 60px;
  width: 189px;
  float: left;
  margin-right: 100px;
}
.el-header .so {
  margin-top: 10px;
  width: 300px;
  float: right;
}
/* 顶栏容器CSS END */
</style>